<template>
  <div class="contain-box">
    <p class="title">{{title}}</p>
    <div class="company">
      <p class="sub-title">{{company}}
        <router-link to="/newsLists" tag="div" class="more">查看更多 ></router-link>
      </p>
      <ul class="company-info">
        <li class="info" v-for="(item,index) in companyList" @click="goParam(index)">
          <div class="box">
            <img v-lazy="item.titlepic" alt="">
            <div class="msg">
              <p class="msg-title">{{item.title}}</p>
              <p class="text">{{item.brief}}</p>
            </div>
            <span></span>
            <div class="date">
              <p class="month">
                {{new Date(parseInt(item.addtime)).getMonth() + 1}}-{{new Date(parseInt(item.addtime)).getDay() + 1}}</p>
              <p class="year">{{new Date(parseInt(item.addtime)).getFullYear()}}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="industry">
      <p class="sub-title">{{industry}}</p>
      <ul class="industry-info">
        <li class="items" v-for="item in industryList">
          <a :href="item['url']" class="msg" target="_blank">{{item["title"]}}</a>
          <p class="odate">{{item["time"].slice(5)}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import api from '@/axios.js'
  export default{
    data () {
      return {
        title: "新闻动态",
        company: "公司",
        industry: "行业",
        companyList: [],
        industryList: [
          {
            title: "世界杯来袭，数字标牌观球“新姿势”",
            time: "2018-06-27",
            url: "http://www.ds-360.com/news/2018/6/2018_1_31300.htm"
          },
          {
            title: "2018年数字标牌行业五大趋势",
            time: "2018-06-22",
            url: "http://www.ds-360.com/news/2018/6/2018_1_31233.htm"
          },
          {
            title: "机场借数字标牌塑造整体客户体验",
            time: "2018-06-19",
            url: "http://www.pjtime.com/2018/6/271828675668.shtml"
          },
          {
            title: "LG下一代数字标牌解决方案惊艳亮相InfoComm",
            time: "2018-06-13",
            url: "http://tech.ifeng.com/a/20180613/45024708_0.shtml"
          },
          {
            title: "AI+数字标牌，助力打造线下零售个性化",
            time: "2018-06-04",
            url: "http://www.pjtime.com/2018/6/112848268664.shtml"
          },
          {
            title: "数字标牌亟待技术创新，如何创造出更大价值？",
            time: "2018-04-25",
            url: "http://www.pjtime.com/2018/4/351822322398.shtml"
          },
          {
            title: "确保数字标牌吸引观众的五大建议",
            time: "2018-03-27",
            url: "http://www.pjtime.com/2018/3/363247625454.shtml"
          },
          {
            title: "数字标牌广告如何影响消费者行为？",
            time: "2018-03-07",
            url: "http://www.pjtime.com/2018/3/163326202672.shtml"
          },
          {
            title: "“云”概念让数字标牌广告机如虎添翼",
            time: "2018-01-15",
            url: "http://www.ds-360.com/news/2018/1/2018_1_29884.htm"
          }
        ]
      }
    },
    mounted(){
      api.getNewsList({
        pageNum: 0,
        pageSize: 0
      }).then((response) => {
        this.companyList = response.data.slice(0, 3)
      });
    },
    methods: {
      goParam(index){
        this.$router.push({name: 'NewsDetial', params: {id: index}});
      }
    }
  }
</script>
<style scoped>
  .contain-box {
    width: 85%;
    font-size: 36px;
    margin: 0 auto;
    margin-top: 70px;
    color: #505050;
  }

  .box {
    height: 100%;
    position: relative;
  }

  .box img {
    width: 200px;
    height: 150px;
  }

  .company, .industry {
    width: 48%;
    display: inline-block;
    font-size: 24px;
    box-sizing: border-box;
  }

  .info {
    width: 775px;
    height: 150px;
    background: #f7f7f7;
    margin: 25px 0;
    cursor: pointer;
  }

  div.msg {
    width: 70%;
    height: 100%;
    display: inline-block;
    margin-left: 30px;
    vertical-align: middle;
  }

  .msg-title {
    font-size: 20px;
    text-align: left;
    margin-top: 40px;
  }

  .text {
    font-size: 14px;
    color: #949494;
    text-align: left;
    margin-top: 18px;
  }

  .msg-title, .text {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .box > img {
    float: left;
  }

  .box > span {
    display: inline-block;
    width: 1px;
    height: 50px;
    background: #b5b5b5;
    position: absolute;
    right: 110px;
    top: 35%;
    display: none;
  }

  .date {
    position: absolute;
    right: 30px;
    top: 20%;
    display: inline-block;
    color: #949494;
    text-align: center;
    display:none;
  }

  .month {
    font-size: 36px;
  }

  .year {
    font-size: 24px;
  }

  .items {
    height: 56px;
    border-bottom: 1px solid #b5b5b5;
    box-sizing: border-box;
  }

  .industry {
    float: right;
  }

  .items > .msg {
    height: 100%;
    line-height: 58px;
    display: inline-block;
    font-size: 16px;
    color: #505050;
    margin-left: 0;
    text-decoration: none;
  }

  .items > .odate {
    height: 100%;
    line-height: 58px;
    display: inline-block;
    float: right;
    margin-right: 20px;
    font-size: 16px;
    color: #949494;
  }

  @media screen and (max-width: 1600px) {
    .info {
      width: 645px;
      margin: 25px 0;
    }

    .company, .industry {
      width: 48%;
    }

    div.msg {
      width: 64%;
    }
  }

  @media screen and (max-width: 1366px) {
    .company, .industry {
      width: 48%;
    }
    .info {
      width: 100%;
      margin: 25px 0;
    }
    div.msg {
      width:58%;
    }
  }

  .more {
    width: 130px;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    color: orange;
    background: #f2f2f2;
    font-size: 16px;
    text-align: center;
    /*margin: 0 auto;
    margin-bottom: 20px;*/
    cursor: pointer;
    display: inline-block;
    float: right;
  }

  p.title{
    font-size: 46px;
    text-align: center;
    margin-bottom: 40px;
    line-height: 46px;
  }

  .sub-title{
    margin-bottom: 20px;
  }
</style>
